<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="imageUrl"
      label="产品图片"
      width="120">
      <template v-slot="scope">
        <img :src="scope.row.imageUrl" alt="" style="height:40px;width:90px">
      </template>
    </el-table-column>
    <el-table-column
      prop="productName"
      label="产品名称"
      width="100">
    </el-table-column>
    <el-table-column
      prop="description"
      label="产品描述"
      width="300">
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格"
      width="80">
    </el-table-column>
    <el-table-column
      prop="inventory"
      label="库存">
    </el-table-column>
    <el-table-column
      prop="operate"
      label="操作">
        <template v-slot="{row}">
            <el-row>
                <el-button type="success"  @click="open(row)">
                <i class="el-icon-unlock"></i>
                充值
                </el-button>
            </el-row>
        </template>
    </el-table-column>
  </el-table>
</template>

<script>
import * as api from "@/api"
  export default {
    data() {
      return {
        tableData: []
      }
    },
    mounted() {
        api.getVipProductApi()
        .then(res=>{
            // console.log(res.data.data);
            this.tableData = res.data.data
        })
    },
    methods: {
      open(row) {
        this.$confirm('你正在购买尊贵的VIP服务, 是否继续?', '提示', {
          confirmButtonText: '立即充值',
          cancelButtonText: '再考虑一下',
          type: 'success'
        }).then(() => {
          // console.log(row);
          this.$message({
            type: 'success',
            message: '请确认订单详情'
          });
          //订单数据存本地
          localStorage.setItem("ddsj",JSON.stringify(row))
          //跳转页面
          this.$router.push({
            name:"preorder",
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消本次充值'
          });          
        });
      }
    }

  }
</script>